<script setup>
import { buildProps } from "_@vue_compiler-core@3.2.37@@vue/compiler-core";
import { reactive, toRefs } from "vue";
defineProps({
  SquareList: Array,
});

// 数据类型
const data = reactive({});
const {} = toRefs(data);
</script>
<template>
  <div class="topic" v-for="(item, index) in SquareList" :key="index">
    <div class="topic_header">
      <div class="topic_img">
        <img :src="item.square_info.avatar" alt="" />
      </div>
      <div class="img_right">
        <div class="topic_name">小喵喵</div>
        <div class="data_time">09-19</div>
      </div>
      <van-tag round type="primary" color="#fdebe4" size="large">+关注</van-tag>
      <van-icon name="ellipsis" />
    </div>
    <p>
      <span> #12132#</span>
      {{ item.square_info.dyna_details }}
    </p>
    <div class="img_text">
      <img
        :src="ele"
        alt=""
        v-for="(ele, index) in item.square_info.dyna_cover"
        :key="index"
      />
    </div>
    <div class="topic_footer">
      <img
        src=""
        alt=""
      />
      <img
        src=""
        alt=""
      />
      <img
        src=""
        alt=""
      />
    </div>
  </div>
</template>



<style lang="scss" scoped>
.topic {
  //   width: 750px;
  //   height: 660px;
  margin-top: 30px;
  background: white;
  padding: 0 20px;
  .topic_header {
    // width: 750px;
    height: 100px;
    display: flex;
    align-items: center;
    .topic_img {
      img {
        width: 68px;
        height: 68px;
        border-radius: 50px;
      }
    }

    .img_right {
      width: 60%;
      font-size: 20px;
      margin-left: 10px;
    }
    .van-tag {
      color: #f05923;
      margin-right: 30px;
    }
    .van-icon {
      flex: 1;
      text-align: center;
    }
  }
  p {
    font-size: 25px;
    span {
      color: #405895;
    }
  }
  .img_text {
    width: 300px;
    // height: 300px;
    height: calc(100%);
    margin: 30px 0;
    display: flex;
    img {
      width: 200px;
      height: 200px;
      margin-left: 5px;
    }
  }
  .topic_footer {
    height: 100px;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
      margin-top: 20px;
    }
  }
}
</style>